<template>
  <view :class="{'schedule-query-container': !isLandscape }">
	  <template v-if="!isLandscape">
	  
		<view class="page-header">
		  <text class="page-title">赛程列表</text>
		  <text class="page-subtitle">赛事: {{ matchName }}</text>
		</view>

		<view class="schedule-list-section">
		  <view class="list-header">
			<text class="section-title">赛程列表</text>
			<view class="header-actions">
			  <button class="create-btn" @click="goToCreateSchedule">创建赛程</button>
			  <button class="model-btn" @click="goToScheduleModel">赛程模型</button>
			  <button class="settle-btn" @click="goToScheduleSettle">赛程结算方式</button>
			  <text class="list-count">共 {{ scheduleList.length }} 个赛程</text>
			</view>
		  </view>
		  
		  <view class="list-tip">
			<text class="tip-text">💡 点击赛程可查看该赛程下的房间列表</text>
		  </view>

		  <view v-if="loading" class="loading-container">
			<view class="loading-spinner"></view>
			<text>加载中...</text>
		  </view>
		  
		  <view v-else-if="scheduleList.length === 0" class="empty-state">
			<text>该赛事下暂无赛程</text>
		  </view>

		  <view v-else class="schedule-list">
			<view 
			  class="schedule-item" 
			  v-for="schedule in scheduleList" 
			  :key="schedule.id"
			  @click="goToRoomQuery(schedule)"
			>
			  <view class="schedule-header">
				<text class="schedule-name">{{ schedule.name }}</text>
				<view class="schedule-status" :class="getStatusClass(schedule.status)">
				  {{ getStatusText(schedule.status) }}
				</view>
			  </view>
			  
			  <view class="schedule-info">
				<view class="info-row">
				  <text class="info-label">赛程ID:</text>
				  <text class="info-value">{{ schedule.id }}</text>
				</view>
				<view class="info-row">
				  <text class="info-label">开始时间:</text>
				  <text class="info-value">{{ formatDate(schedule.startTime) }}</text>
				</view>
				<view class="info-row">
				  <text class="info-label">结束时间:</text>
				  <text class="info-value">{{ formatDate(schedule.endTime) }}</text>
				</view>
				<view class="info-row">
				  <text class="info-label">描述:</text>
				  <text class="info-value">{{ schedule.desc || '无' }}</text>
				</view>
			  </view>
			  
			  <view class="schedule-actions">
				<button class="register-btn" @click.stop="registerSchedule(schedule)">报名</button>
				<button class="view-reg-btn" @click.stop="viewRegistrations(schedule)">查看报名情况</button>
				<button class="bind-settle-btn" @click.stop="openBindSettleModal(schedule)">绑定结算方式</button>
			  </view>
			</view>
		  </view>
		</view>
	</template>
	<!-- 横屏相关内容 -->
	<LandscapePage
	v-else
	:buttons="buttons"
	:formBtns="formBtns"
	:setCurrentIndex="setCurrentIndex"
	:currentIndex="currentIndex"
	:data="scheduleList"
	:formItems="formItems"
	:getStatusClass="getStatusClass"
	:getStatusText="getStatusText"
	:matchName="matchName"
	:loading="loading"
	></LandscapePage>
    
    <!-- 结算方式绑定模态框 -->
    <view class="modal-overlay" v-if="showBindModal" @click="closeBindModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">绑定结算方式</text>
          <button class="close-btn" @click="closeBindModal">×</button>
        </view>
        
        <view class="modal-body">
          <view class="bind-info">
            <text class="bind-label">赛程: {{ currentSchedule?.name }}</text>
          </view>
          
          <view class="bind-section">
            <view class="section-header">
              <text class="section-title">已绑定的结算方式</text>
              <button class="add-btn" @click="openAddSettleModal">添加结算方式</button>
            </view>
            
            <view v-if="bindLoading" class="loading-container">
              <view class="loading-spinner"></view>
              <text>加载中...</text>
            </view>
            
            <view v-else-if="bindList.length === 0" class="empty-state">
              <text>暂未绑定结算方式</text>
            </view>
            
            <view v-else class="bind-list">
              <view 
                class="bind-item" 
                v-for="bind in bindList" 
                :key="bind.id"
              >
                <view class="bind-content">
                  <text class="settle-id">结算方式: {{ bind.matchScheduleSettleId }}</text>
                  <text class="settle-type">类型: {{ getSettleTypeText(bind.settleType) }}</text>
                  <text class="bind-time">绑定时间: {{ formatDate(bind.createTime) }}</text>
                </view>
                <button class="unbind-btn" @click="unbindSettle(bind)">解绑</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 添加结算方式模态框 -->
    <view class="modal-overlay" v-if="showAddSettleModal" @click="closeAddSettleModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">添加结算方式</text>
          <button class="close-btn" @click="closeAddSettleModal">×</button>
        </view>
        
        <view class="modal-body">
          <view v-if="settleLoading" class="loading-container">
            <view class="loading-spinner"></view>
            <text>加载中...</text>
          </view>
          
          <view v-else-if="settleList.length === 0" class="empty-state">
            <text>暂无可用结算方式</text>
          </view>
          
          <view v-else class="settle-list">
            <view 
              class="settle-item" 
              v-for="settle in settleList" 
              :key="settle.id"
              @click="selectSettle(settle)"
              :class="{ 'selected': selectedSettleId === settle.id }"
            >
              <view class="settle-content">
                <text class="settle-id">ID: {{ settle.id }}</text>
                <text class="settle-name">{{ settle.settleName }}</text>
                <text class="settle-type">{{ settle.settleType }}</text>
              </view>
              <view class="settle-status" v-if="isSettleBound(settle.id)">
                <text class="bound-tag">已绑定</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="cancel-btn" @click="closeAddSettleModal">取消</button>
          <button class="submit-btn" @click="bindSettle" :disabled="!selectedSettleId || binding">
            {{ binding ? '绑定中...' : '绑定' }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { MatchAPI, MatchScheduleSettleAPI, MatchScheduleSettleRefAPI, MatchScheduleRegAPI, BattleAPI } from '@/api/battle.js'
import { useUserStore } from '@/stores/user.js'
import useIsLandscape from '@/composables/useIsLandscape.js'
import LandscapePage from '@/views/landscape/schedule-query.vue'

const { isLandscape } = useIsLandscape()

const loading = ref(false)
const scheduleList = ref([])
const matchId = ref('')
const matchName = ref('')

// 用户store
const userStore = useUserStore()

// 结算方式绑定相关数据
const showBindModal = ref(false)
const showAddSettleModal = ref(false)
const bindLoading = ref(false)
const settleLoading = ref(false)
const binding = ref(false)
const currentSchedule = ref(null)
const bindList = ref([])
const settleList = ref([])
const selectedSettleId = ref('')

// 状态映射
const statusMap = {
  0: '待开始',
  1: '进行中',
  2: '已结束'
}

// 状态样式映射
const statusClassMap = {
  0: 'status-pending',
  1: 'status-active',
  2: 'status-finished'
}

// 结算类型映射
const settleTypeMap = {
  1: '排行榜服务',
  2: '积分服务',
  3: '预留',
  4: '预留'
}

const getStatusText = (status) => statusMap[status] || '未知'
const getStatusClass = (status) => statusClassMap[status] || 'status-unknown'
const getSettleTypeText = (type) => settleTypeMap[type] || '未知'

const formatDate = (timestamp) => {
  if (!timestamp) return '未设置'
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN')
}

const fetchSchedules = async () => {
  if (!matchId.value) return;
  loading.value = true
  setCurrentIndex(0)
  try {
    const result = await MatchAPI.schedulePage({ matchId: matchId.value })
    console.log('赛程查询API返回结果:', result)
    if (result.code === 0) {
      scheduleList.value = result.data || []
    } else {
      scheduleList.value = [] // Ensure list is cleared on error
      throw new Error(result.msg || '获取赛程失败')
    }
  } catch (error) {
    console.error('获取赛程失败:', error)
    uni.showToast({
      title: error.message || '获取赛程失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

onLoad((options) => {
  if (options.matchId) {
    matchId.value = options.matchId
    matchName.value = decodeURIComponent(options.matchName || '')
    fetchSchedules()
  }
})

// 跳转到创建赛程页面
const goToCreateSchedule = () => {
  uni.navigateTo({
    url: `/views/schedule-create?matchId=${matchId.value}&matchName=${encodeURIComponent(matchName.value)}`
  })
}

// 跳转到赛程模型页面
const goToScheduleModel = () => {
  uni.navigateTo({
    url: `/views/schedule-model-manage?matchId=${matchId.value}&matchName=${encodeURIComponent(matchName.value)}`
  })
}

// 跳转到赛程结算方式页面
const goToScheduleSettle = () => {
  uni.navigateTo({
    url: `/views/schedule-settle-manage?matchId=${matchId.value}&matchName=${encodeURIComponent(matchName.value)}`
  })
}

// 打开绑定结算方式模态框
const openBindSettleModal = (schedule) => {
  currentSchedule.value = schedule
  showBindModal.value = true
  loadBindList()
}

// 关闭绑定模态框
const closeBindModal = () => {
  showBindModal.value = false
  currentSchedule.value = null
  bindList.value = []
}

// 加载绑定列表
const loadBindList = async () => {
  if (!currentSchedule.value) return
  
  bindLoading.value = true
  try {
    const result = await MatchScheduleSettleRefAPI.page({
      matchScheduleId: currentSchedule.value.id,
      pageNum: 0,
      pageSize: 100
    })
    
    if (result.code === 0 && result.data) {
      bindList.value = result.data.list || result.data || []
    } else {
      bindList.value = []
      throw new Error(result.msg || '获取绑定列表失败')
    }
  } catch (error) {
    console.error('获取绑定列表失败:', error)
    uni.showToast({
      title: error.message || '获取绑定列表失败',
      icon: 'none'
    })
  } finally {
    bindLoading.value = false
  }
}

// 显示添加结算方式模态框
const openAddSettleModal = () => {
  showAddSettleModal.value = true
  selectedSettleId.value = ''
  loadSettleList()
}

// 关闭添加结算方式模态框
const closeAddSettleModal = () => {
  showAddSettleModal.value = false
  selectedSettleId.value = ''
  settleList.value = []
}

// 加载结算方式列表
const loadSettleList = async () => {
  settleLoading.value = true
  try {
    const result = await MatchScheduleSettleAPI.page({
      pageNum: 0,
      pageSize: 100
    })
    
    if (result.code === 0 && result.data) {
      settleList.value = result.data.list || result.data || []
    } else {
      settleList.value = []
      throw new Error(result.msg || '获取结算方式列表失败')
    }
  } catch (error) {
    console.error('获取结算方式列表失败:', error)
    uni.showToast({
      title: error.message || '获取结算方式列表失败',
      icon: 'none'
    })
  } finally {
    settleLoading.value = false
  }
}

// 选择结算方式
const selectSettle = (settle) => {
  if (!isSettleBound(settle.id)) {
    selectedSettleId.value = settle.id
  }
}

// 检查结算方式是否已绑定
const isSettleBound = (settleId) => {
  return bindList.value.some(bind => bind.matchScheduleSettleId === settleId)
}

// 绑定结算方式
const bindSettle = async () => {
  if (!selectedSettleId.value || !currentSchedule.value) return
  
  const selectedSettle = settleList.value.find(s => s.id === selectedSettleId.value)
  if (!selectedSettle) return
  
  binding.value = true
  try {
    const result = await MatchScheduleSettleRefAPI.create({
      matchScheduleId: currentSchedule.value.id,
      matchScheduleSettleId: selectedSettleId.value,
      settleType: selectedSettle.settleType || 1
    })
    
    if (result.code === 0) {
      uni.showToast({
        title: '绑定成功',
        icon: 'success'
      })
      closeAddSettleModal()
      loadBindList()
    } else {
      throw new Error(result.msg || '绑定失败')
    }
  } catch (error) {
    console.error('绑定结算方式失败:', error)
    uni.showToast({
      title: error.message || '绑定失败',
      icon: 'none'
    })
  } finally {
    binding.value = false
  }
}

// 解绑结算方式
const unbindSettle = async (bind) => {
  uni.showModal({
    title: '确认解绑',
    content: `确定要解绑结算方式 ${bind.matchScheduleSettleId} 吗？`,
    success: async (res) => {
      if (res.confirm) {
        try {
          const result = await MatchScheduleSettleRefAPI.remove({
            matchScheduleSettleRefId: bind.id
          })
          
          if (result.code === 0) {
            uni.showToast({
              title: '解绑成功',
              icon: 'success'
            })
            loadBindList()
          } else {
            throw new Error(result.msg || '解绑失败')
          }
        } catch (error) {
          console.error('解绑结算方式失败:', error)
          uni.showToast({
            title: error.message || '解绑失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 赛程报名
const registerSchedule = async (schedule) => {
  try {
    // 检查用户是否已登录
    if (!userStore.isLoggedIn) {
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      })
      return
    }

    // 显示确认对话框
    uni.showModal({
      title: '确认报名',
      content: `确定要报名参加赛程 "${schedule.name}" 吗？`,
      success: async (res) => {
        if (res.confirm) {
          // 显示加载提示
          uni.showLoading({
            title: '报名中...'
          })
          
          try {
            // 调用新的赛程报名API
            const result = await BattleAPI.regSchedule({
              matchScheduleId: schedule.id,  // 要报名的赛程ID
              appId: 1,                      // 应用ID，默认1
              channel: 1                     // 渠道ID，默认1
            })
            
            console.log('赛程报名API返回结果:', result)
            
            if (result.code === 0) {
              uni.showToast({
                title: '报名成功',
                icon: 'success'
              })
              
              // 可以在这里添加其他逻辑，比如刷新报名状态等
              console.log('报名成功，返回数据:', result.data)
            } else {
              throw new Error(result.msg || '报名失败')
            }
          } catch (error) {
            console.error('报名失败:', error)
            uni.showToast({
              title: error.message || '报名失败',
              icon: 'none'
            })
          } finally {
            uni.hideLoading()
          }
        }
      }
    })
  } catch (error) {
    console.error('报名操作失败:', error)
    uni.showToast({
      title: '报名操作失败',
      icon: 'none'
    })
  }
}

// 查看报名情况
const viewRegistrations = (schedule) => {
  uni.navigateTo({
    url: `/views/schedule-registration?scheduleId=${schedule.id}&scheduleName=${encodeURIComponent(schedule.name)}`
  })
}

// 跳转到房间查询页面
const goToRoomQuery = (schedule) => {
  uni.navigateTo({
    url: `/views/room-query?scheduleId=${schedule.id}&scheduleName=${encodeURIComponent(schedule.name)}`
  })
}

// 横屏时按钮组
const buttons = [
	{
		text: '创建赛程',
		icon: '/static/view3.png',
		click: goToCreateSchedule
	},
	{
		text: '赛程模型',
		icon: '/static/view4.png',
		click: goToScheduleModel
	},
	{
		text: '赛程结算方式',
		icon: '/static/view5.png',
		click: goToScheduleSettle
	}
]
const formBtns = [
	{
		text: '报名',
		icon: '/src/static/btn_green.png',
		color: '#005918',
		className: 'schedule-query-btn',
		click() {
			registerSchedule(scheduleList.value[currentIndex.value])
		}
	},
	{
		text: '查看报名情况',
		icon: '/src/static/btn_yellow.png',
		color: '#9B3B18',
		className: 'schedule-query-btn',
		click() {
			viewRegistrations(scheduleList.value[currentIndex.value])
		}
	},
	{
		text: '绑定结算方式',
		icon: '/src/static/btn_blue.png',
		color: '#FFFFFF',
		className: 'schedule-query-btn',
		click() {
			openBindSettleModal(scheduleList.value[currentIndex.value])
		}
	}
]

const formItems = [
	{
		label: '赛程ID',
		key: 'id',
		format(val) {
			return val
		}
	},
	{
		label: '开始时间',
		key: 'startTime',
		format(val) {
			return formatDate(val)
		}
	},
	{
		label: '结束时间',
		key: 'endTime',
		format(val) {
			return formatDate(val)
		}
	},
	{
		label: '描述',
		key: 'desc',
		format(val) {
			return val || '无'
		}
	}
]

// 当前模式的索引
const currentIndex = ref(0)
const setCurrentIndex = (index) => currentIndex.value = index

</script>

<style lang="scss" scoped>
.schedule-query-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx;
}

.page-header {
  text-align: center;
  margin-bottom: 60rpx;
  
  .page-title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  }
  
  .page-subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.schedule-list-section {
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
    }
    
    .header-actions {
      display: flex;
      align-items: center;
      gap: 15rpx;
      flex-wrap: wrap;
      
      .create-btn, .model-btn, .settle-btn {
        height: 60rpx;
        padding: 0 25rpx;
        border: none;
        border-radius: 12rpx;
        color: #fff;
        font-size: 24rpx;
        font-weight: bold;
        white-space: nowrap;
      }
      
      .create-btn {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
      }
      
      .model-btn {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
      }
      
      .settle-btn {
        background: linear-gradient(135deg, #6c757d 0%, #3a3f44 100%);
      }
      
      .list-count {
        color: rgba(255, 255, 255, 0.8);
        font-size: 24rpx;
        margin-left: auto;
      }
    }
  }

  .list-tip {
    margin-bottom: 30rpx;
    
    .tip-text {
      color: rgba(255, 255, 255, 0.8);
      font-size: 28rpx;
    }
  }

  .loading-container, .empty-state {
    text-align: center;
    color: #fff;
    padding: 50rpx;
  }
  
  .schedule-list .schedule-item {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-5rpx);
      box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.3);
    }
    
    &:active {
      transform: translateY(-2rpx);
    }
      
    .schedule-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      
      .schedule-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .schedule-status {
        padding: 8rpx 20rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
        font-weight: bold;
        
        &.status-pending { background: #fff3cd; color: #856404; }
        &.status-active { background: #d4edda; color: #155724; }
        &.status-finished { background: #f8d7da; color: #721c24; }
      }
    }
      
    .schedule-info {
      .info-row {
        display: flex;
        margin-bottom: 15rpx;
        font-size: 26rpx;
        
        .info-label { width: 160rpx; color: #666; }
        .info-value { flex: 1; color: #333; }
      }
    }
    
    .schedule-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12rpx;
      margin-top: 20rpx;
      flex-wrap: wrap;
      
      .register-btn, .view-reg-btn, .bind-settle-btn {
        padding: 8rpx 16rpx;
        border: none;
        border-radius: 8rpx;
        color: #fff;
        font-size: 24rpx;
        font-weight: bold;
        height: 50rpx;
        line-height: 34rpx;
        white-space: nowrap;
        min-width: auto;
      }
      
      .register-btn {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
      }
      
      .view-reg-btn {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
      }
      
      .bind-settle-btn {
        background: linear-gradient(135deg, #6c757d 0%, #3a3f44 100%);
      }
    }
  }
}

// 结算方式绑定相关样式
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  
  .modal-content {
    width: 90%;
    max-height: 80%;
    background: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #eee;
      
      .modal-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .close-btn {
        width: 60rpx;
        height: 60rpx;
        border: none;
        background: none;
        font-size: 40rpx;
        color: #999;
		line-height: 60rpx;
		margin: 0;
      }
    }
    
    .modal-body {
      padding: 30rpx;
      max-height: 60vh;
      overflow-y: auto;
      
      .bind-info {
        margin-bottom: 30rpx;
        padding: 20rpx;
        background: #f8f9fa;
        border-radius: 12rpx;
        
        .bind-label {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }
      }
      
      .bind-section {
        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20rpx;
          
          .section-title {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
          }
          
          .add-btn {
            height: 50rpx;
            padding: 0 20rpx;
            background: #28a745;
            border: none;
            border-radius: 8rpx;
            color: #fff;
            font-size: 24rpx;
          }
        }
        
        .bind-list {
          .bind-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx;
            background: #f8f9fa;
            border-radius: 12rpx;
            margin-bottom: 15rpx;
            
            .bind-content {
              flex: 1;
              
              .settle-id {
                display: block;
                font-size: 26rpx;
                color: #333;
                margin-bottom: 5rpx;
              }
              
              .settle-type {
                display: block;
                font-size: 24rpx;
                color: #666;
                margin-bottom: 5rpx;
              }
              
              .bind-time {
                font-size: 24rpx;
                color: #999;
              }
            }
            
            .unbind-btn {
              height: 50rpx;
              padding: 0 20rpx;
              background: #dc3545;
              border: none;
              border-radius: 8rpx;
              color: #fff;
              font-size: 24rpx;
            }
          }
        }
      }
      
      .settle-list {
        .settle-item {
          padding: 20rpx;
          background: #f8f9fa;
          border-radius: 12rpx;
          margin-bottom: 15rpx;
          border: 2rpx solid transparent;
          position: relative;
          
          &.selected {
            border-color: #007bff;
            background: #e3f2fd;
          }
          
          .settle-content {
            .settle-id {
              display: block;
              font-size: 26rpx;
              color: #333;
              font-weight: bold;
              margin-bottom: 5rpx;
            }
            
            .settle-name {
              display: block;
              font-size: 24rpx;
              color: #666;
              margin-bottom: 5rpx;
            }
            
            .settle-type {
              font-size: 24rpx;
              color: #999;
            }
          }
          
          .settle-status {
            position: absolute;
            top: 10rpx;
            right: 10rpx;
            
            .bound-tag {
              background: #6c757d;
              color: #fff;
              padding: 4rpx 8rpx;
              border-radius: 6rpx;
              font-size: 20rpx;
            }
          }
        }
      }
    }
    
    .modal-footer {
      display: flex;
      gap: 20rpx;
      padding: 30rpx;
      border-top: 2rpx solid #eee;
      
      .cancel-btn, .submit-btn {
        flex: 1;
        height: 80rpx;
        border: none;
        border-radius: 12rpx;
        font-size: 28rpx;
        font-weight: bold;
        
        &.cancel-btn {
          background: #f8f9fa;
          color: #666;
          border: 2rpx solid #eee;
        }
        
        &.submit-btn {
          background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
          color: #fff;
          
          &:disabled {
            opacity: 0.6;
          }
        }
      }
    }
  }
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media screen and (orientation: landscape) {
	.modal-overlay {
		.modal-content {
			display: flex;
			max-height: 90%;
			flex-direction: column;
			.modal-header {
				padding: 10rpx;
			}
			.modal-body {
				box-sizing: border-box;
				padding: 10rpx;
			}
			.modal-footer {
				padding: 10rpx;
				.cancel-btn, .submit-btn {
					height: 60rpx;
					line-height: 60rpx;
				}
			}
		}
	}
}
</style> 